<template>
  <div id="electronicPayslipSetting">
    <div class="title">工资条设置</div>
    <!-- 工资条设置 -->
    <el-form class="editForm">
      <el-form-item label="工资条确认方式：">
        <div class="confirmRadio">
          <el-radio v-model="editForm.confirmWay" :label="1">无需确认</el-radio>
          <el-radio v-model="editForm.confirmWay" :label="2">按钮确认</el-radio>
          <p v-if="editForm.confirmWay == 2" class="setDay">
            <span>工资单发放</span>
            <el-input class="dayInput" type="number" v-model="editForm.issueDay" />
            <span>天后，系统自动确认</span>
          </p>
          <el-radio v-model="editForm.confirmWay" :label="3">签名确认</el-radio>
          <p v-if="editForm.confirmWay == 3" class="setDay">
            工资单发放
            <el-input class="dayInput" type="number" v-model="editForm.issueDay" />
            天后，系统自动确认
          </p>
        </div>
      </el-form-item>
      <el-form-item label="工资条员工反馈：">
        <el-radio-group v-model="editForm.payslipFeedback">
          <el-radio :label="true">允许反馈</el-radio>
          <el-radio :label="false">拒绝反馈</el-radio>
        </el-radio-group>
      </el-form-item>
      <div class="btnList">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleSubmit">保存</el-button>
      </div>
    </el-form>
  </div>
</template>
<script>
export default {
  name: 'electronicPayslipSetting',
  data() {
    return {
      editForm: {
        id: 0,
        confirmWay: 1, // 工资条确认方式
        issueDay: '', // 工资条已发放天数
        payslipFeedback: false, // 是否反馈
        operateType: 1, // 操作类型
      }
    }
  },
  methods: {
    searchSettingDetails() {
      this.$api.electronicPayslip
        .GetSettingDetail({ settingId: "" })
        .then(res => {
          console.log(res);
          if (res.data.data) {

            if (res.data.data.issueDay == 0) {
              res.data.data.issueDay = ''; // 如果天数是0，就给他置空
            }
            this.editForm = res.data.data;
            this.editForm.operateType = 2;
          } else {

            this.editForm.operateType = 1;
          }

        })
    },
    editPayslipSetting(data) {
      this.$api.electronicPayslip
        .AddPayslipSetting(data)
        .then(res => {
          console.log(res);
          this.$message.success(res.data.message);
        })
    },
    handleCancel() {
      this.$router.go(-1);
    },
    handleSubmit() {
      const { id, confirmWay, issueDay, payslipFeedback, companyId, operateType } = this.editForm
      // const data = JSON.parse(JSON.stringify());
      const data = {
        id,
        confirmWay,
        issueDay: parseInt(issueDay),
        payslipFeedback,
        companyId,
        operateType
      }
      if (data.issueDay == '') {
        data.issueDay = 0;
      }
      this.editPayslipSetting(data);
      // console.log(this.editForm);
      // 
    }
  },
  activated() {
    this.searchSettingDetails();
  }
}
</script>
<style lang="less" scoped>
#electronicPayslipSetting {
  color: #606266;
  .title {
    font-weight: 700;
    font-size: 24px;
    // text-align: center;
    margin-bottom: 10px;
  }
  .editForm {
    margin-left: 20px;
  }
  .setDay {
    margin: 10px 0 10px 5px;
    span {
      display: inline-block;
      height: 100%;
    }
    .dayInput {
      width: 50px;
      :deep(.el-input__inner) {
        padding: 0 5px;
      }
    }
  }
  .confirmRadio {
    display: flex;
    flex-direction: column;
    :deep(.el-radio) {
      display: inline-block;
      margin-top: 10px;
      margin-bottom: 10px;
      // margin-left: 120px;
    }
  }
  .btnList {
    width: 350px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>
<style lang="less">
#electronicPayslipSetting {
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
  }
  input[type="number"] {
    -moz-appearance: textfield;
    background-color: red;
  }
}
</style>